<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>4.绑定style样式</title>
        <!-- 引入Vue -->
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1 :style="str">学习vue动态绑定style样式---字符串形式</h1>


            <h1 :style="obj">学习vue动态绑定style样式---对象形式</h1>


            <h1 :style="arr">学习vue动态绑定style样式---数组形式</h1>

        </div>
    </body>

    <script>
        new Vue({
            el:"#app",
            data:{
                str:"width:300px;height:300px;background:red;",
                obj:{
                    width:"300px",
                    height:"300px",
                    fontSize:"30px",
                    backgroundColor:"blue"
                },
                arr:[
                    {
                        width:"300px",
                        height:"300px",
                        border:"1px solid red"
                    },
                    {
                        fontSize:"30px",
                        backgroundColor:"pink"
                    }
                ]
            }
        })
    </script>
</html>